<!-- 小只 -->
<template>
	<view class="mask">
		<view class="tran-password">
			<image class="close" src="../static/imgs/chacha.png" mode="" @click="close"></image>
			<view class="title">支付密码</view>
			<!-- <view class="title" v-if="uni.getStorage('languageSet')!='zh'">{{text ? text : 'trading'}}{{$t('inputPwd.title')}}</view> -->
			<view class="top">
				<view class="topCenter">
					<text>请输入支付密码</text>
					<!-- <text v-if="uni.getStorage('languageSet')!='zh'">{{$t('inputPwd.title2')}}{{text ? text : 'trading'}}{{$t('inputPwd.title')}}</text> -->
					<u-input class="input" v-model="value" type="password" :focus="true" :border="false" placeholder="支付密码" :password-icon="false"/>
				</view>
			</view>

			<view class="bottom">
				<view class="btn" @click="close" >
					取消
				</view>
				<view class="btn" @click="confirm">确认</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props:['text'],
		data() {
			return {
				value: ''
			}
		},
		methods: {
			close() {
				this.$emit('close')
			},
			findPwd() {
				uni.navigateTo({
					url: "/pages/mine/forgerPwd/forgerPwd",
				});
			},
			confirm() {
				// this.$Router.push({
				// 	name: 'complete'
				// })
				// this.$emit('close')
				this.$emit('enterPass', this.value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mask {
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		background-color: rgba($color: #000000, $alpha: .7);
	}

	.tran-password {
		width: 80%;
		height: 400rpx;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		// background-size: 100% 100%;
		// background-repeat: no-repeat;
		// background-position: center;
		// background-image: url(../static/image/xin/find_pwd.png);
		background-color: #FFFFFF;
		text-align: center;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		padding: 32rpx 0;
		.close {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			left: 36rpx;
			top: 20rpx;
			z-index: 1001;
		}

		.title {
			color: #000000;
			font-size: 34rpx;
			// position: absolute;
			// display: inline-block;
			// left: 0;
			// right: 0;
			// top: -10rpx;
		}

		.top {
			margin-top: 74rpx;

			.topCenter {
				padding: 0 30rpx;
				color: #000000;

				.input {
					color: #3C3C43;
					width: 90%;
					margin: 0 auto;
          background: #F2F2F7;
          height: 80rpx;
          border-radius: 8rpx;
				}

				text {
					display: inline-block;
					margin-bottom: 20rpx;
				}

				/deep/ input {
					text-align: center;
					background-color: transparent;
				}

				/deep/ .u-input__right-icon .uicon-eye:before,
				/deep/ .u-input__right-icon .uicon-eye-fill:before,
				/deep/ .u-input__right-icon .uicon-close-circle-fill:before {
					color: #C5CDE2;
				}
			}
		}

		.bottom {
			display: flex;
			position: absolute;
			bottom: 0;
			width: 100%;
			border-top: 1rpx solid rgba(145, 153, 172, 0.1);
			.btn {
				width: 50%;
				border-radius: 0;
				font-size: 34rpx;
				background-color: transparent;
				padding: 20rpx;
        color: #000000;
				border-right: 1rpx solid rgba(145, 153, 172, 0.1);
			}

			.btn:nth-child(2) {
				color: #2987FF;
				border-right: 0rpx;
			}
		}
	}
</style>
